<!-- 党建联系 -->
<template>
  <div>
    <van-nav-bar
      title="党建联系"
      left-arrow
      @click-left="$router.push('/')"
    />
    <!--一条通知 -->
    <div v-if="pageData.title" class="border-bottom-one-rem topNotice marqueeNotice">
      <img src="../../assets/smallBell.png" alt="">
      <span>{{pageData.title}}</span>
      
    </div>
    <!-- 表格 -->
    <div style="padding:0 3rem">
      <noSencondLevelTable :tableData="tableData"></noSencondLevelTable>
    </div>
    <div v-if="tableData.tbody.length>=8" class="lookMore" @click="lookMore">
      {{isMore?'查看更多':'收起'}}
      <span class="iconSpan"><svg-icon :icon-class="isMore?'xiala':'shouqi'"></svg-icon></span>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/index.js'
import noSencondLevelTable from '../components/noSencondLevelTable'
export default {
  components: {noSencondLevelTable},
  data() {
    return {
      pageData:{},
      isMore:false,
      tableData:{
        thead:[
          {prop:'linkdeptname',label:'联系点',width:'flex5'},
          {prop:'begintime',label:'联系时间',width:'flex1'}
        ],
        isNeedDetails:true,
        tbody:[]
      },
      data:{
        "methodName":"getLeaderLinkList",
        "serviceName":"PersonalInfo",
        "pageindex":"1",                              
        "pagesize":"8",                          
        "usercode":"",        
        "roleid":"",                                        
      }
    };
  },
  created(){
    this.getLocalData()
    this.getLeaderLinkList()
  },
  methods: {
    getLeaderLinkList(){
      getUserInfo(this.data).then(res=>{
        if (res.status == '1') {
          this.pageData = res.data
          // this.tableData.tbody = res.data.linklist
          if (this.isMore) {
            this.tableData.tbody.push(res.data.linklist)
            if (this.tableData.tbody.length%8==0) {
              this.isMore = true
            }else{
              this.isMore = false
            }
          }else{
            this.tableData.tbody = res.data.linklist
            this.isMore = true
          }
        }
      })
    },
    getLocalData(){
      this.data.usercode = window.localStorage.getItem('usercode')
      this.data.roleid = window.localStorage.getItem('roleId')
    },
    lookMore(){ //查看更多|收起
      if(this.isMore){
        let pageindex = Number(this.data.pageindex);
        pageindex += 1
        this.data.pageindex = pageindex.toString()
      } else {
        this.data.pageindex = '1'
      }
      this.getLeaderLinkList()
    }
  }
}
</script>
<style scoped>
.lookMore{
  color:#BB383E;
  text-align: center;
  font-size: 2rem;
  padding: 1rem 0;
}
.iconSpan{
  display: inline-block;
  height: 2rem;
  width: 2rem;
}
.marqueeNotice{
  font-size: 2.8rem;
  color: #BB383E;
}
.topNotice{
  display: flex;
  align-items: center;
  height: 44px;
  padding-right: 4rem;
  
}
.topNotice span{
  display: inline-block;
  width: 52rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topNotice img{
  width: 17px;
  height: 17px;
  margin:0 1.4rem 0 3.1rem ;
}
</style>